<template>
  <div>
    <el-card>
      <el-form :model="form" ref="formRef" :inline="true" label-width="68px">
        <el-form-item label="支付方式" prop="orderNo">
          <el-input v-model="form.paymentWay" placeholder="请输入支付方式" clearable style="width: 240px" />
        </el-form-item>
        <el-form-item label="订单号" prop="orderNo">
          <el-input v-model="form.orderNo" placeholder="请输入订单号" clearable style="width: 240px" />
        </el-form-item>
        <el-form-item label="订单金额" prop="amount">
          <el-input v-model="form.amount" placeholder="请输入订单金额" clearable style="width: 240px" />
        </el-form-item>
        <el-form-item>
          <el-button :loading="buttonLoading" type="primary" icon="Search" @click="handleSubmit">提交</el-button>
          <el-button icon="Refresh" @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card>
      <el-row>
        <div>请求结果：</div>
        <el-input type="textarea" v-model="response"></el-input>
      </el-row>
    </el-card>
  </div>
</template>
<script setup name="PayOrder" lang="ts">
import request from '@/utils/request';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const response = ref('');
const buttonLoading = ref(false);
const formRef = ref<ElFormInstance>();
const form = ref({
  id: undefined,
  orderNo: undefined,
  amount: undefined,
  paymentWay: undefined
});
/** 搜索按钮操作 */
const handleSubmit = async () => {
  buttonLoading.value = true;
  const res = await request({
    url: '/test/payOrder/createOrder',
    method: 'post',
    data: form.value
  }).finally(() => {
    buttonLoading.value = false;
  });
  response.value = JSON.stringify(res);
}

/** 重置按钮操作 */
const resetForm = () => {
  formRef.value?.resetFields();
}
</script>
